<template>
        <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>个人信息界面</span>
        </div>
      </template>
    <el-form :model="form" label-width="120px">
                       <!-- 修改图片 -->
                       <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/pc/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.picture" :src="'http://localhost:8080/images/upload/'+form.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
        <el-form-item label="uid">
            <el-input v-model="form.pc_uid" disabled  />
        </el-form-item>

        <el-form-item label="姓名">
            <el-input v-model="form.pc_name" />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio v-model="form.pc_sex" label="1">男</el-radio>
            <el-radio v-model="form.pc_sex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.pc_password" />
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="form.pc_email" />
        </el-form-item>
        <el-form-item label="联系方式">
            <el-input v-model="form.pc_phone" />
        </el-form-item>
        <el-form-item label="工作经历">
            <el-input v-model="form.pc_work" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updatePc">
                修改
            </el-button>
        </el-form-item>
    </el-form>
</el-card>
</template>
  
<script>
import { ElMessage } from 'element-plus'
import { Plus } from "@element-plus/icons-vue"; //图片上传plus
export default {
    components: {  Plus },
    data() {
        return {
            form: {},
            tableData: [],
            pc_uid: localStorage.getItem("pc_uid"),
        }
    },
    mounted() {
        this.$http.get("http://localhost:8080/pc/get/" + this.pc_uid).then((res) => {
            console.log(res.data);
            this.form = res.data
            this.form.stu_sex = this.form.pc_name ? "1" : "0"
        }).catch((err) => {

        })
    },
    methods: {
        handleSuccess(response) {
      console.log(response);
      //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
      this.form.picture =  response;
    },
        updatePc() {
            this.form.pc_sex = Number(this.form.pc_sex)
            console.log(this.form);
            this.$http.post("http://localhost:8080/pc/update", this.form).then((res) => {
                console.log(res.data);
                if (res.data == 1) {
                    console.log("修改成功！");
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    })
                } else {
                    console.log("修改失败！");
                    ElMessage({
                        message: '修改失败！',
                        type: 'warning',
                    })
                }
            }).catch((err) => {

            })
        },

    }
}
</script>
    <!--这些是对话框右边图片上传的样式-->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>